import React, { Component,createRef } from 'react'

export default class Control extends Component {
    state={val:''}
    myRef = createRef();
    get=()=>{

        //原生方法DOM获取
        // let val = document.querySelector('input').value
        // console.log(val)
        //console.log(this.state.val);
        //回调函数
        // console.log(this.inp.value);
        //弃用;ref是字符串
        // console.log(this.refs.inp.value);
        //createRef()
        console.log(this.myRef);
        console.log(this.myRef.current.value);
    }
    changeVal=(e)=>{
        this.setState({val:e.target.value})
        // console.log();
    }

        // getNode = ele=>{this.inp = ele};

    render() {
        //解构
        const {val} = this.state;
        return (
            <div>
                <input onInput={this.changeVal} value={val} placeholder='输内容！' defaultValue='非受控方式设置初始值'/>
                {/* 
                    改变之后失去焦点用onChange 
                    <input onChange={this.changeVal} value={val}/>
                */}
                {/* <input ref={this.getNode} />  */}

                <input ref='inp'/><br/>
                <input ref={ele=>this.inp = ele} /> <br/>
                <input ref = {this.myRef}/><br/>

                {/* <input ref='inp'/>过时 */}
                <button onClick={this.get}>打印输入内容</button>
            </div>
        )
    }
}
